<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-article-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-featured-blog.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-article-card.css' | asset_url | stylesheet_tag }}</noscript>

{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}

{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}

{{ 'section-main-product.css' | asset_url | stylesheet_tag }}

<style>
.tenways-default-article .product-popup-modal__opener button{
  text-decoration: underline;
  color: #47dca7;
  font-weight: bold;
  padding: 0;
  height: auto;
}

.tenways-default-article .product-popup-modal__content {
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  width: max-content;
  height: auto;
  margin: 0;
  padding: 0;
}

.tenways-default-article .product-popup-modal__content-info {
  padding-right: 0;
}

.tenways-default-article .product-popup-modal__toggle {
  padding: 0;
  position: absolute;
  right: 20px;
  top: 20px;
}

.tenways-default-article .product-popup-modal__toggle path {
  stroke: #000;
}

.tenways-default-article .product-popup-modal__toggle .icon {
  width: 16px;
}

@media screen and (max-width: 990px) {
.tenways-default-article .product-popup-modal__content {
      width: 100%;
  }
}
</style>


<article class="tenways-main-article tenways-default-article article-template" itemscope itemtype="http://schema.org/BlogPosting">
  {%- if article.image -%}
<div class="article-template__hero-container" >
            <div class="pc-article article-template__hero-{{ section.settings.image_height }} media"
            itemprop="image"
            {% if section.settings.image_height == 'adapt' and article.image %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="{% if article.image.width >= 350 %}{{ article.image | img_url: '350x' }} 350w,{% endif %}
                {% if article.image.width >= 750 %}{{ article.image | img_url: '750x' }} 750w,{% endif %}
                {% if article.image.width >= 1100 %}{{ article.image | img_url: '1100x' }} 1100w,{% endif %}
                {% if article.image.width >= 1500 %}{{ article.image | img_url: '1500x' }} 1500w,{% endif %}
                {% if article.image.width >= 2200 %}{{ article.image | img_url: '2200x' }} 2200w,{% endif %}
                {% if article.image.width >= 3000 %}{{ article.image | img_url: '3000x' }} 3000w,{% endif %}
                {{ article.image | img_url: 'master' }} {{ article.image.width }}w"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
              src="{{ article.image | img_url: '1100x' }}"
              loading="lazy"
              width="{{ article.image.width }}"
              height="{{ article.image.height }}"
              alt="{{ article.image.alt | escape }}">  
          </div>
          <div class="mb_article">
            {{ article.excerpt }}
          </div>
            <div class="bg">
            </div>   
          </div>
{%- endif -%}

   <div class="b-article">
    <div class="page-width">
      <div class="ar_all">

        <div class="ar_right">
           {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when '@app' -%}
        <div class="page-width page-width--narrow">
          {% render block %}
        </div>
      {%- when 'featured_image'-%}
        {%- if article.image -%}
          <div class="article-template__hero-container" {{ block.shopify_attributes }}>
            <div class="article-header">
              <p class="article_tags">
                {% for tag in article.tags -%}
                  {{ tag  | replace: '-', ' ' }}
                {%- endfor %}
              </p>
                <header class="page-width page-width--narrow">
                    <h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>
                    {%- if block.settings.blog_show_date -%}
                    <span class="circle-divider tenways-caption caption-with-letter-spacing" itemprop="dateCreated pubdate datePublished"> {% render 'article-time' %} {{ article.published_at | time_tag: format: 'date' }}</span>
                  {%- endif -%}
                  </header>
            </div>
            
          </div>
        {%- endif -%}

        {%- when 'title'-%}
          <header class="page-width page-width--narrow" {{ block.shopify_attributes }}>
            <h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>
            {%- if block.settings.blog_show_date -%}
              <span class="circle-divider caption-with-letter-spacing" itemprop="dateCreated pubdate datePublished">{{ article.published_at | time_tag: format: 'date' }}</span>
            {%- endif -%}
            {%- if block.settings.blog_show_author -%}
              <span class="caption-with-letter-spacing" itemprop="author" itemscope itemtype="http://schema.org/Person">
                <span itemprop="name">{{ article.author }}</span>
              </span>
            {%- endif -%}
          </header>

        {%- when 'content'-%}
          <div class="article-template__content  {% if template.suffix != 'tenways-blog-post' %} page-width {% else %}  pages-width {% endif %} page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>
              {{ article.content }}
          </div>

        {%- when 'share' -%}
          <div class="article-template__social-sharing page-width page-width--narrow" {{ block.shopify_attributes }}>
            <share-button class="share-button" {{ block.shopify_attributes }}>
              <button class="share-button__button hidden">
                {% render 'icon-share' %}
                {{ block.settings.share_label | escape }}
              </button>
              <details>
                <summary class="share-button__button">
                  {% render 'icon-share' %}
                  {{ block.settings.share_label | escape }}
                </summary>
                <div id="Article-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                  <div class="field">
                    <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
                    </span>
                    <input type="text"
                          class="field__input"
                          id="url"
                          value="{{ shop.url | append: article.url }}"
                          placeholder="{{ 'general.share.share_url' | t }}"
                          onclick="this.select();"
                          readonly
                    >
                    <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                  </div>
                  <button class="share-button__close hidden no-js-hidden">
                    {% render 'icon-close' %}
                    <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
                  </button>
                  <button class="share-button__copy no-js-hidden">
                    {% render 'icon-clipboard' %}
                    <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                  </button>
                </div>
              </details>
            </share-button>
            <script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
          </div>
    {%- endcase -%}
  {%- endfor -%}

        </div>
    
        <div class="ar_left">
            
  
          {{ 'component-article-card.css' | asset_url | stylesheet_tag }}
          {{ 'component-card.css' | asset_url | stylesheet_tag }}
          {{ 'section-main-blog.css' | asset_url | stylesheet_tag }}
          
          
         
            <div class="recommend-blog tenways-blog main-blog page-width">
              <div class="total-blog">
                <h2 class="blog__title center">
                  {%- if section.settings.text != blank -%}
                   {{ section.settings.text }}
                 {%- endif -%}
                </h2>
              </div>
              <div class="blog-articles blog-articles--collage">
                {% assign Darticle = article.title %}
                 {%- assign ATAG = article.tags | join: ',' -%}
                       {%- if article.tags.size > 0 -%}
                     {%- for article in blog.articles -%}
                     {%- if Darticle != article.title -%}
                     {% for tag in article.tags %}
                         {% if ATAG contains tag %}
                         
                          <div class="blog-articles__article article">             
                           {%- render 'tenways-article-card', article: article, image_height: section.settings.image_height, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author -%}
                          </div>
               
                         {% endif %} 
                      {% endfor %}
               
                      {%- endif -%}
                     {%- endfor -%}
                     
                       {%- else -%}
                       
                        {%- for article in blog.articles -%}
                        {%- if Darticle != article.title -%}
                       <div class="blog-articles__article article">             
                           {%- render 'tenways-article-card', article: article, image_height: section.settings.image_height, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author -%}
                          </div>   
                          {%- endif -%}
                      {%- endfor -%}
                     
                       {%- endif -%}
                     
                     
                   </div>
            </div>

          </div>
       
  
  
       </div>
   </div>
   {%- if blog.comments_enabled? -%}
   <div class="twy-comments article-template__comment-wrapper background-secondary">
     <div id="comments" class="page-width page-width--narrow">
       {%- if article.comments_count > 0 -%}
         {%- assign anchorId = '#Comments-' | append: article.id -%}

         <h2 id="Comments-{{ article.id }}">{{ 'blogs.article.comments' | t: count: article.comments_count }}</h2>
         {% paginate article.comments by 5 %}
           <div class="article-template__comments">
             {%- if comment.status == 'pending' and comment.content -%}
               <article id="{{ comment.id }}" class="article-template__comments-comment">
                 {{ comment.content }}
                 <footer class="right">
                   <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
                 </footer>
               </article>
             {%- endif -%}

             {%- for comment in article.comments -%}
               <article id="{{ comment.id }}" class="article-template__comments-comment">
                 {{ comment.content }}
                 <footer class="right">
                   <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span><span class="caption-with-letter-spacing">{{ comment.created_at | time_tag: format: 'date' }}</span>
                 </footer>
               </article>
             {%- endfor -%}
             {% render 'pagination', paginate: paginate, anchor: anchorId %}
           </div>
         {% endpaginate %}
       {%- endif -%}
       {% form 'new_comment', article %}
         {%- liquid
           assign post_message = 'blogs.article.success'
           if blog.moderated? and comment.status == 'unapproved'
             assign post_message = 'blogs.article.success_moderated'
           endif
         -%}
         <h2>{{ 'blogs.article.comment_form_title' | t }}</h2>
         {%- if form.errors -%}
           <div class="form__message" role="alert">
             <h3 class="form-status caption-large" tabindex="-1" autofocus>
               {% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}
             </h3>
           </div>
           <ul class="form-status-list caption-large">
             {%- for field in form.errors -%}
               <li>
                 <a href="#CommentForm-{{ field }}" class="link">
                   {%- if form.errors.translated_fields[field] contains 'author' -%}
                     {{ 'blogs.article.name' | t }}
                   {%- elsif form.errors.translated_fields[field] contains 'body'-%}
                    {{ 'blogs.article.message' | t }}
                   {%- else -%}
                     {{ form.errors.translated_fields[field] }}
                   {%- endif -%}
                   {{ form.errors.messages[field] }}
                 </a>
               </li>
             {%- endfor -%}
           </ul>
         {%- elsif form.posted_successfully? -%}
           <div class="form-status-list form__message" role="status">
             <h3 class="form-status" tabindex="-1" autofocus>{% render 'icon-success' %} {{ post_message | t }}</h3>
           </div>
         {%- endif -%}

         <div{% if blog.moderated? == false %} class="article-template__comments-fields"{% endif %}>
           <div class="article-template__comment-fields">
             <div class="field field--with-error">
              <label class="field__label" for="CommentForm-author">{{ 'blogs.article.name' | t }} <span aria-hidden="true">*</span></label>
               <input
                 type="text"
                 name="comment[author]"
                 id="CommentForm-author"
                 class="field__input"
                 autocomplete="name"
                 value="{{ form.author }}"
                 aria-required="true"
                 {% if form.errors contains 'author' %}
                   aria-invalid="true"
                   aria-describedby="CommentForm-author-error"
                 {% endif %}
                 placeholder="{{ 'blogs.article.name' | t }}"
               >
               
               {%- if form.errors contains 'author' -%}
                 <small id="CommentForm-author-error">
                   <span class="form__message">{% render 'icon-error' %}{{ 'blogs.article.name' | t }} {{ form.errors.messages['author'] }}.</span>
                 </small>
               {%- endif -%}
             </div>
             <div class="field field--with-error">
              <label class="field__label" for="CommentForm-email">{{ 'blogs.article.email' | t }} <span aria-hidden="true">*</span></label>
               <input
                 type="email"
                 name="comment[email]"
                 id="CommentForm-email"
                 autocomplete="email"
                 class="field__input"
                 value="{{ form.email }}"
                 autocorrect="off"
                 autocapitalize="off"
                 aria-required="true"
                 {% if form.errors contains 'email' %}
                   aria-invalid="true"
                   aria-describedby="CommentForm-email-error"
                 {% endif %}
                 placeholder="{{ 'blogs.article.email' | t }}"
               >
               {%- if form.errors contains 'email' -%}
                 <small id="CommentForm-email-error">
                   <span class="form__message">{% render 'icon-error' %}{{ 'blogs.article.email' | t }} {{ form.errors.messages['email'] }}.</span>
                 </small>
               {%- endif -%}
             </div>
           </div>
           <div class="field field--with-error">
            <label class="form__label field__label" for="CommentForm-body">{{ 'blogs.article.message' | t }} <span aria-hidden="true">*</span></label>
             <textarea
               rows="5"
               name="comment[body]"
               id="CommentForm-body"
               class="text-area field__input"
               aria-required="true"
               {% if form.errors contains 'body' %}
                 aria-invalid="true"
                 aria-describedby="CommentForm-body-error"
               {% endif %}
               placeholder="{{ 'blogs.article.message' | t }}"
             >{{ form.body }}</textarea>
           </div>
           {%- if form.errors contains 'body' -%}
             <small id="CommentForm-body-error">
               <span class="form__message">{% render 'icon-error' %}{{ 'blogs.article.message' | t }} {{ form.errors.messages['body'] }}.</span>
             </small>
           {%- endif -%}
         </div>
         {%- if blog.moderated? -%}
           <p class="article-template__comment-warning caption">{{ 'blogs.article.moderated' | t }}</p>
         {%- endif -%}
         <input type="submit" class="button" value="{{ 'blogs.article.post' | t }}">
       {% endform %}
     </div>
 </div>
 {%- endif -%}

        <modal-dialog id="PopupModal-blog_posts" class="product-popup-modal">
    <div role="dialog" aria-label="{{ block.settings.text }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
      <button id="ModalClose-blog_posts" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}"> {% render 'icon-close' %}</button>
      <div class="product-popup-modal__content-info">
        <div class="klaviyo-form-VLcaZ7"></div>
      </div>
    </div>
  </modal-dialog>
     
   </div>
</article>




<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "articleBody": {{ article.content | strip_html | json }},
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": {{ shop.url | append: page.url | json }}
    },
    "headline": {{ article.title | json }},
    {% if article.excerpt != blank %}
      "description": {{ article.excerpt | strip_html | json }},
    {% endif %}
    {% if article.image %}
      {% assign image_size = article.image.width | append: 'x' %}
      "image": [
        {{ article | img_url: image_size | prepend: "https:" | json }}
      ],
    {% endif %}
    "datePublished": {{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
    "dateCreated": {{ article.created_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
    "author": {
      "@type": "Person",
      "name": {{ article.author | json }}
    },
    "publisher": {
      "@type": "Organization",
      {% if settings.share_image %}
        {% assign image_size = settings.share_image.width | append: 'x' %}
        "logo": {
          "@type": "ImageObject",
          "height": {{ settings.share_image.height | json }},
          "url": {{ settings.share_image | img_url: image_size | prepend: "https:" | json }},
          "width": {{ settings.share_image.width | json }}
        },
      {% endif %}
      "name": {{ shop.name | json }}
    }
  }
  </script>


{% schema %}
{
  "name": "Tenways default article",
  "tag": "section",
  "settings": [
{
    "type": "text",
    "id": "text",
    "default": "Read more",
    "label": "Read more"
  },
  {
    "type": "select",
    "id": "image_height",
    "options": [
      {
        "value": "adapt",
        "label": "adapt"
      },
      {
        "value": "small",
        "label": "small"
      },
      {
        "value": "medium",
        "label": "medium"
      },
      {
        "value": "large",
        "label": "large"
      }
    ],
    "default": "adapt",
    "label": "image height",
    "info": "image height"
  },
  {
    "type": "text",
    "id": "heading",
    "default": "Read more",
    "label": "Blog posts"
  },
  {
    "type": "blog",
    "id": "blog",
    "label": "blog"
  },
  {
    "type": "range",
    "id": "post_limit",
    "min": 2,
    "max": 4,
    "step": 1,
    "default": 3,
    "label": "post_limit"
  },
  {
    "type": "checkbox",
    "id": "show_image",
    "default": true,
    "label": "show image",
    "info": "show image"
  },
  {
    "type": "checkbox",
    "id": "show_date",
    "default": true,
    "label": "show date"
  },
  {
    "type": "checkbox",
    "id": "show_author",
    "default": false,
    "label": "show author"
  },
  {
    "type": "checkbox",
    "id": "soft_background",
    "default": false,
    "label": "soft background"
  },
  {
    "type": "checkbox",
    "id": "show_view_all",
    "default": false,
    "label": "show view all"
  }
  ],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "featured_image",
      "name": "t:sections.main-article.blocks.featured_image.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "image_height",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__1.label"
            },
            {
              "value": "small",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__2.label"
            },
            {
              "value": "medium",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__3.label"
            },
            {
              "value": "large",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__4.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.main-article.blocks.featured_image.settings.image_height.label",
          "info": "t:sections.main-article.blocks.featured_image.settings.image_height.info"
        },
        {
            "type": "checkbox",
            "id": "blog_show_date",
            "default": true,
            "label": "Blog show date"
          }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.main-article.blocks.title.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "blog_show_date",
          "default": true,
          "label": "t:sections.main-article.blocks.title.settings.blog_show_date.label"
        },
        {
          "type": "checkbox",
          "id": "blog_show_author",
          "default": false,
          "label": "t:sections.main-article.blocks.title.settings.blog_show_author.label"
        }
      ]
    },
    {
      "type": "content",
      "name": "t:sections.main-article.blocks.content.name",
      "limit": 1
    },
    {
      "type": "share",
      "name": "t:sections.main-article.blocks.share.name",
      "limit": 2,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.main-article.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-article.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-article.blocks.share.settings.title_info.content"
        }
      ]
    }
  ],
  "presets": [
  {
    "name": "Tenways default article"
  }
  ]
}
{% endschema %}
